<template>
  <div class="huafei">
    <div class="content">
        <input type="text" placeholder="请输入手机号码" ref="number">
        <div>
            <div v-for="(v,i) in arr" :key="i" @click="fun(i)">
                <h3>{{v.num}}<span>元</span></h3>
                <p>售价{{v.text}}元</p>
            </div>
        </div>
        

    </div>
   
    
  </div>
</template>

<script>
    import { Dialog } from 'vant';
export default {
    components: {
    [Dialog.Component.name]: Dialog.Component,
  },
    data(){
        return {
            arr:[
            {"num":"50","text":"49"},
            {"num":"100","text":"99"},
            {"num":"200","text":"199"},
            {"num":"300","text":"299"},
        ]
        }
    },
    methods:{
        fun(val){
            let reg=/^1(3|5|7)\d{9}$/;
            console.log(this.$refs.number.value)
            if(this.$refs.number.value!=""){
                if(reg.test(this.$refs.number.value)){
                this.$router.push({name:"chong",query:{haoma:this.$refs.number.value,mianzhi:this.arr[val].num,shoujia:this.arr[val].text}})
                }else {
                    Dialog({ message: '请输入正确手机号' });
                }
            }else {
                Dialog({ message: '请输入手机号' });
            }
            
        }
    }

}
</script>

<style lang="scss" scoped>
    .huafei {
        width: 100%;
        // background: #999;
        >div {
            width: 90%;
            // height: 2.7rem;
            margin: auto;
           
            input {
                margin: .15rem auto;
                width: 99%;
                height: .4rem;
                border-bottom: .02rem solid #eee;
            }
            >div{
                display: flex;
                flex-wrap: wrap;
                
                >div {
                    width: 30%;
                    height: .7rem;
                    border: 2px solid #d8e1ef;
                    border-radius: .06rem;
                    text-align: center;
                    margin: 0 2% .1rem 0;
                    h3 {
                        margin-top: .14rem;
                        color: #004aa3;
                        font-weight: bolder;
                        font-size: .18rem;
                        span {
                            font-size: .16rem;
                        }
                    }
                    p {
                        font-size: .12rem;
                        color: #e75d4a;
                    }
                }
            }
        }
    }


</style>